<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-07-08 23:48:38
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-09 07:52:15
 * @FilePath: \react\03.JSX语法规则\1.JSX语法规则.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>1.JSX语法规则</title>

    <style>
        .title {
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于解析jsx为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myId = 'aTgUiGu'
        const myData = 'HeLlo,rEaCt'
        //1.创建虚拟DM
        const VDOM = (
            <div>
                <h1  className="title"  id={myId.toUpperCase()}>
                <span style={{color:"red",fonstSize:"30px"}}>{myData.toUpperCase()}</span>
            </h1>
            <input type="text" className="t"/>  
            {/* <Good></Good> //Good is not defined  */}
              {/**<good>1234</good>  The tag <good> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
                in good
                in div
              **/}
             </div>
        )
        //2,渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('root'))
        /******
         * jSX语法规则
         * 1.定义虚拟DOM时,不要写引号.
         * 2.标签中混入JS表达式时要用{}。 
         * 3.样式的类名指定不要用class , 要用className.
         * 4.内联样式,要用style={{key:value}},最外层大括号标识里层是js表达式的形式去写.
         * 5.只有一个根标签
         * 6.标签必须闭合
         * 7.标签首字母 
         *  (1),若小写字母开头,则将该标签转为html同名元素,若html中无该标签对应的同名元素,则报错.
         *  (2),若大写字母开头,react就会渲染对应的组件,若组件没有定义,则报错
         * 
         * ************/ 
    </script>
</body>

</html>